<template>
  <div>
    <Top></Top>
    <TopNav></TopNav>
    <div v-if="playList" class="hotop">
      <div class="hotopct">
        <div class="hoticon">

        </div>
        <span class="newdate">更新日期:{{ playList.updateTime | formatDate }} </span>
      </div>

    </div>
    <ul class="newsong" v-if="hotSong.length > 0" >
      <li v-for="(s,index) in hotSong" :key="s.id">
        <SongItem :item="s" @play="$emit('play',$event)">{{index+1}}</SongItem>
      </li>
    </ul>
    <Loading v-if="isLoading"></Loading>
    <div class="loadingmore" @click="loadMore">加载更多</div>

  </div>
</template>
<script>
import Top from "@/components/Top";
import TopNav from "@/components/TopNav";
import SongItem from "@/components/SongItem";
import Loading from "@/components/Loading";
export default {
  name: "Recommend",
  data() {
    return {
      hotSong: [],
      playList: null,
      page:1,
      isLoading:true
    };
  },
  components: {
    Top,
    TopNav,
    SongItem,
    Loading
  },
  created() {
    this.loadMusic();
  },
  methods: {
    loadMusic() {
      //  歌单详情
      this.$http.get("/playlist/detail?id=3778678").then(data => {
        let trackIDS = data.data.playlist.trackIds.slice((this.page-1)*20,20*this.page);
        this.playList = data.data.playlist;
        let ids = trackIDS.map(d => {
          return d.id;
        })
        return ids.join(",");
      }).then(ids => {
        this.$http.get("http://localhost:3000/song/detail?ids="+ids).then(songData=>{
          this.isLoading=false
          songData.data.songs.map(d=>{
            d.song={
              artists:d.ar

            }
            this.hotSong.push(d);//加入值不会覆盖而是叠加
            return d;
          });

          // this.hotSong = songDat;//直接赋值，覆盖之前的值
        });
      });
    },

    loadMore(){
      this.page++;
      if(this.page>=10){
        return false;
      }
      this.isLoading = true;
      this.loadMusic();

    }

  },
  filters: {
    formatDate(val) {
      let date = new Date(val);
      return date.getMonth() + 1 + "月" + date.getDate() + "日";
    },
  },
};
</script>
<style lang="less" scoped>
.hotop{
  position: relative;
  padding-top: 38.9%;
  overflow: hidden;
  background:url(//s3.music.126.net/mobile-new/img/hot_music_bg_2x.jpg?f01a252389c26bcf016816242eaa6aee=) no-repeat;
  background-size: contain;
  position: relative;
  .hotopct{
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    padding-left: 20px;
    box-sizing: border-box;
    .hoticon{
      background:url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=) no-repeat;
      width: 142px;
      height: 67px;
      background-position: -24px -30px;
      background-size: 166px 97px;


    }
    .newdate{
      margin-top: 10px;
      color: hsla(0,0%,100%,.8);
      font-size: 12px;
    }
  }


}
.loadingmore{
  background-color: bisque;
  text-align: center;
}
</style>